<template>
  <div class="footer">
    <ul class="foot-nav">
      <li>
        <router-link to="/index">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </router-link>
      </li>
      <li>
        <router-link to="/class">
          <i class="el-icon-menu"></i>
          <span>分类</span>
        </router-link>
      </li>
      <li>
        <router-link to="/cart">
          <i class="el-icon-s-goods"></i>
          <span>购物车</span>
        </router-link>
      </li>
      <li>
        <router-link to="/my">
          <i class="el-icon-user-solid"></i>
          <span>我的</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
a {
  text-decoration: none;
  //   color: #000;
}
ul li {
  list-style: none;
}
.foot-nav {
  background: #fff;
  height: 65px;
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  li a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    // color: #8f8d89;
    i {
      font-size: 25px;
      margin-bottom: 5px;
      //   color: #000;
    }
  }
}

.router-link-active {
  color: #409eff;
}
</style>
